<template>
  <ElFormItem
    :label="titleText(options, item)"
    :prop="[childIndex, 'value']"
    :rules="{
      required: item.isRequired === 'Y',
      message: '请选择评分',
      trigger: 'change',
    }"
    class="flex_column"
  >
    <p v-if="options.showDesc" class="desc f12 mb10">
      {{ options.description }}
    </p>
    <div>
      <div v-for="(next, idx) in options.optionItems" :key="idx">
        <p v-if="options.optionItems.length > 1">{{ next.label }}</p>
        <Rate
          v-model="item.value[idx]"
          :allow-half="optionItemSet.half"
          :count="optionItemSet.maxLength || 5"
          :disabled="type === 'view'"
          :icon="optionItemSet.hasType || 'star'"
          :void-icon="
            optionItemSet.hasType ? optionItemSet.hasType + '-o' : 'star-o'
          "
          color="#1989fa"
          size="30px"
          @change="onChange"
        />
        <span v-if="optionItemSet.showScore && item.value[idx]" class="ml10">{{
            item.value[idx] + "分"
          }}</span>
      </div>
    </div>
  </ElFormItem>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import { ElFormItem, ElMessage } from "element-plus";
import { Rate } from "vant";
import { onBeforeMount, reactive, } from "vue";

//defineOptions({ name: "PCRate" });

const { item, type, index, childIndex } = defineProps([
  "item",
  "type",
  "index",
  "childIndex",
]);
const emits = defineEmits(["change"]);
const options = reactive(JSON.parse(item.vformJson || "{}").options);
const optionItemSet = options.optionItemSet || {};
// 传递值改变后
const onChange = () => {
  let bool = false;
  item.value.forEach((val, idx) => {
    if (val < options.optionItemSet.min || val > options.optionItemSet.max) {
      item.value[idx] = null;
      bool = true;
    }
  });
  if (bool)
    ElMessage.error(
      `值应在${options.optionItemSet.min}~${options.optionItemSet.max}之间`,
    );
  else emits("change", item);
};
onBeforeMount(() => {
  if (!item.value) {
    item.value = [];
  }
});
// 表单校验
// const validate = (rule, value, callback) => {
//   let values = item.value.filter(row => !!row)
//   if (values.length === options.optionItems.length) callback()
//   else callback(new Error('请选择'))
// }
</script>